<template>
	<view class="flex flex-column flex-1">
		<!-- <uni-nav-bar :fixed="true" left-icon="back" title="烟气自动监测设备日常巡检记录表" color="#156DAC" @clickLeft="pageback"></uni-nav-bar> -->
		<view class="form-title">
			<text>水污染源自动监测设备运行与维护记录</text>
		</view>
			<view class="user-form">
				<view class="user-form-item">
					<view class="form-label">设备名称</view>
					<view class="form-input"><input class="form-input" v-model="form.key1"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">规格型号</view>
					<view class="form-input"><input class="form-input" v-model="form.key2"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">设备编号</view>
					<view class="form-input"><input class="form-input" v-model="form.key3"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">安装地点</view>
					<view class="form-input"><input class="form-input" v-model="form.key4"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">企业名称</view>
					<view class="form-input"><input class="form-input" v-model="form.key5"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">运行单位</view>
					<view class="form-input"><input class="form-input" v-model="form.key6"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">运行维护内容及处理说明</view>
					<view class="form-input"><input class="form-input" v-model="form.key7"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">日期</view>
					<view class="form-input">
						<!-- <input class="form-input" v-model="form.key8"> -->
						<TimeSelector
							class="form-ipt"
						    showType="date"
							@btnConfirm="(e)=>dateChange(e,'key8')" 
						>
						    <text v-if="form.key8">{{form.key8}}</text>
							<text v-else style="color: grey;">请选择日期</text>
						</TimeSelector>
					</view>
				</view>
				<uni-collapse accordion="true">
					<uni-collapse-item 
						v-for="(item,index) in tableLabels" 
						:key="index" 
						:title="item[0]" 
						:open="index === 0 ? true:false" 
						class="inner-loop-table-collapse"
					>
					<div class="user-form-item">
						<div class="loop-form-table">
							<div class="loop-form-table-row">
								<div v-for="(label,index) in item[1]" class="loop-form-table-item" :key="index">
									{{label}}
								</div>
							</div>
							<!-- 行数 -->
							<template v-for="(t,i) in 8" >
								<div class="loop-form-table-row" :key="i">
									<!-- 列数 -->
									
									<div v-for="(o,idx) in item[1].length" class="loop-form-table-item">
										<!-- {{item[2]+idx+i*item[1].length}} -->
										<template v-if="i==7">
											<input
												class="form-input" v-model="form['key'+(item[2]+idx+i*item[1].length)]" 
												placeholder="备注" 
											/>
										</template>
										<template v-else>
											<!-- v-model="form['key'+(item[2]+idx+i*item[1].length)]" -->
											<CheckTrueFalse 
												class="form-input"
												:formValue="form['key'+(item[2]+idx+i*item[1].length)]"
												:formKey="(item[2]+idx+i*item[1].length)"
												@input="changeCheckValue"
											/>
										</template>
										
									</div>
								</div>
							</template>
						</div>
					</div>
					</uni-collapse-item>
				</uni-collapse>
				<view style="margin: 10upx 0;">
				  <view>正常请打“√；不正常请打“X”并及时处理并做相应记录；未检查则不用标识。 </view>
				  <view>a为每天需要检查的；</view>
				  <view>b为每7天至少进行一次的维护；</view>
				  <view>c每30天至少进行一次的维护；</view>
				  <view>d每季度至少进行一次的维护。</view>
				</view>
				<view class="user-form-item">
					<view class="form-label">巡检人员签字</view>
					<view class="form-input"><input class="form-input" v-model="form.key297"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">异常情况处理记录</view>
					<view class="form-input"><input class="form-input" v-model="form.key298"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">本周巡检情况小结</view>
					<view class="form-input"><input class="form-input" v-model="form.key299"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">(业主确认)</view>
					<view class="form-input"><input class="form-input" v-model="form.key300"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">日期</view>
					<view class="form-input">
						<!-- <input class="form-input" v-model="form.key300"> -->
						<TimeSelector
							class="form-ipt"
						    showType="date"
							@btnConfirm="(e)=>dateChange(e,'key301')" 
						>
						    <text v-if="form.key301">{{form.key301}}</text>
							<text v-else style="color: grey;">请选择日期</text>
						</TimeSelector>
					</view>
				</view>
				<!-- 上传 -->
				<view class="card" style="height: auto;margin-top: 20upx;">
					<view class="user-form-item" style="height: auto;">
						<view class="form-label">上传图片</view>
						<view class="form-input" style="height: auto;border: 0px;">
							<TmUpload ref="imgUpload" :list="imgList" :disabled="isDetail"/>
						</view>
					</view>
				</view>
				<!-- <view class="card" style="height: auto;margin-top: 20upx;">
					<view class="user-form-item" style="height: auto;">
						<view class="form-label">上传视频</view>
						<view class="form-input" style="height: auto;border: 0px;">
							<TmUploadVideo />
						</view>
					</view>
				</view> -->
			</view>
	</view>
</template>
<script>
	var  graceChecker = require("../../../common/graceChecker.js");
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	import TmUpload from '@/components/tm-upload/tm-upload.vue'
	import TmUploadVideo from '@/components/tm-upload-video/tm-upload-video.vue'
	import LbPicker from '@/components/lb-picker'
	import CheckTrueFalse from '@/pages/components/CheckTrueFalse'
	
	import {getDict} from "@/common/dict.js"
	
	export default {
		components: {
			uniIcons,uniPopup,uniNavBar,TimeSelector,TmUpload,TmUploadVideo,LbPicker,CheckTrueFalse
		},
		props:{
			obj: {
				type: Object,
				default: ()=>{}
			},
			isDetail: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				typeList: [],
				tableValue: [],
				resultList:[
					{value:'是',label:'是'},
					{value:'否',label:'否'},
				],
				tableList:[
					{key1: '',key2:'是',key3: '',key4: '',key5: '',key6: ''},
					{key1: '',key2:'是',key3: '',key4: '',key5: '',key6: ''},
					{key1: '',key2:'是',key3: '',key4: '',key5: '',key6: ''}
				],
				unitList:[
					{id: 1,name: '单位一'},{id: 1,name: '单位二'},
				],
				form:{
					key0:'', key1:'', key2:'', key3:'', key4:'', key5:'', key6:'', key7:'', key8:'', key9:'', key10:'', key11:'', key12:'', key13:'', key14:'', key15:'', key16:'', key17:'', key18:'', key19:'', key20:'', key21:'', key22:'', key23:'', key24:'', key25:'', key26:'', key27:'', key28:'', key29:'', key30:'', key31:'', key32:'', key33:'', key34:'', key35:'', key36:'', key37:'', key38:'', key39:'', key40:'', key41:'', key42:'', key43:'', key44:'', key45:'', key46:'', key47:'', key48:'', key49:'', key50:'', key51:'', key52:'', key53:'', key54:'', key55:'', key56:'', key57:'', key58:'', key59:'', key60:'', key61:'', key62:'', key63:'', key64:'', key65:'', key66:'', key67:'', key68:'', key69:'', key70:'', key71:'', key72:'', key73:'', key74:'', key75:'', key76:'', key77:'', key78:'', key79:'', key80:'', key81:'', key82:'', key83:'', key84:'', key85:'', key86:'', key87:'', key88:'', key89:'', key90:'', key91:'', key92:'', key93:'', key94:'', key95:'', key96:'', key97:'', key98:'', key99:'', key100:'', key101:'', key102:'', key103:'', key104:'', key105:'', key106:'', key107:'', key108:'', key109:'', key110:'', key111:'', key112:'', key113:'', key114:'', key115:'', key116:'', key117:'', key118:'', key119:'', key120:'', key121:'', key122:'', key123:'', key124:'', key125:'', key126:'', key127:'', key128:'', key129:'', key130:'', key131:'', key132:'', key133:'', key134:'', key135:'', key136:'', key137:'', key138:'', key139:'', key140:'', key141:'', key142:'', key143:'', key144:'', key145:'', key146:'', key147:'', key148:'', key149:'', key150:'', key151:'', key152:'', key153:'', key154:'', key155:'', key156:'', key157:'', key158:'', key159:'', key160:'', key161:'', key162:'', key163:'', key164:'', key165:'', key166:'', key167:'', key168:'', key169:'', key170:'', key171:'', key172:'', key173:'', key174:'', key175:'', key176:'', key177:'', key178:'', key179:'', key180:'', key181:'', key182:'', key183:'', key184:'', key185:'', key186:'', key187:'', key188:'', key189:'', key190:'', key191:'', key192:'', key193:'', key194:'', key195:'', key196:'', key197:'', key198:'', key199:'', key200:'', key201:'', key202:'', key203:'', key204:'', key205:'', key206:'', key207:'', key208:'', key209:'', key210:'', key211:'', key212:'', key213:'', key214:'', key215:'', key216:'', key217:'', key218:'', key219:'', key220:'', key221:'', key222:'', key223:'', key224:'', key225:'', key226:'', key227:'', key228:'', key229:'', key230:'', key231:'', key232:'', key233:'', key234:'', key235:'', key236:'', key237:'', key238:'', key239:'', key240:'', key241:'', key242:'', key243:'', key244:'', key245:'', key246:'', key247:'', key248:'', key249:''
       
				},
				imgList: [],
				tableLabels:[
					['维护预备',['查询日志a','检查耗材b'],9],//  9 + 2*8（16） = 25
					['辅助设备检查',['站房卫生b','站房门窗的密封性检查b','供电系统（稳压电源、UPS等）b','室内温湿度a','空调b','自来水供应情况b'],25],//25+8*6(48) = 73
					['釆样系统检查',['釆样泵釆水情况a','釆样管路通畅b','自动清洗装置运行情况b','排水管路通畅a','清洗釆样泵、过滤装置b','清洗釆样管路、排水管路b'],73], // 73+8*6(48)=121
					['水污染源在线监测仪器',[
						'仪器报警状态a', '仪器状态参数检查a', '仪器外观检查a', '仪器内部管路通畅b',
						'仪器进样、排液管路清洁检查b', '检查电极标准液、内充液b', '清洗电极头b',
						'标准溶液、试剂是否在保质期b', '更换标准溶液、清洗液、试剂b', '检查泵、管、加热炉等',
						'检查电极是否钝化，必要时进行更换', '检查超声波流量计高度是否发生变化', '仪器管路进行保养、清洁',
						'检查采样部分、计量单元、反应单元、加热单元、检测单元的工作情况',
						'根据水污染源在线监测仪器操作维护说明，检查及更换易损耗件，检查关键零部 件可靠性，如计量单元准确性、反应室密封性等，必要时进行更换',
						'校验d'
					],121],// 121+8*16 =  249
					['数据釆集传输系统',[
						'数据釆集系统报警信息a', '数据上传情况a', '数据釆集情况a','检查数釆仪和仪器的连接b', '检查上传数据和现场数据的一致性b', '数据釆集、传输设备电源b'
					],249]// 249 + 48 = 297
				]
			
			}
		},
		mounted() {
			// 初始化字典
			this.typeList = getDict('e015')
			// console.log(this.typeList)
			// console.log(this.obj)
			// 默认值填充
			this.form.key1 = this.obj.equipmentTypeName
			this.form.key3 = this.obj.equipmentNumber
			this.form.key5 = this.obj.enterpriseName
			if(this.obj.formContent){
				this.form = JSON.parse((this.obj.formContent))
			}else if (this.obj.lastMaintenance) {
			  var lastMaintenance = JSON.parse(this.obj.lastMaintenance.formContent)
			  this.form.key1 = lastMaintenance.key1
			  this.form.key2 = lastMaintenance.key2
			  this.form.key3 = lastMaintenance.key3
			  this.form.key4 = lastMaintenance.key4
			  this.form.key5 = lastMaintenance.key5
			  this.form.key6 = lastMaintenance.key6
			}
				
			
			if(this.obj.filePath){
				this.imgList =  JSON.parse((this.obj.filePath))
			}
		},
		onShow(){
			// console.log(this.form)
		},
		methods: {
			changeCheckValue(key,val){
				console.log(key,val)
				if(key || key == 0){
					// this.form['key'+key] = val
					this.$set(this.form,'key'+key,val)
				}
			},
			dateChange(res,type){
				console.log(res.key,type)
				// this.form[type] = res.key
				this.$set(this.form,type,res.key)
			},
			getFormData(){
				return {
					formContent: JSON.stringify(this.form),
					filePath: JSON.stringify(this.$refs.imgUpload ? this.$refs.imgUpload.getPaths() : []),
				}
			},
			toggle(){
				this.$refs.popup.open()
			},
			tableChange(e){
				// console.log(e.detail)
			},
			handleTimeChange(e,key) {
				// console.log(e)
				this.form[key] = e.key
			},
			getSelectIndex(list,key,listKey = 'id') {
				let index = null
				list.forEach((item,i)=>{
					if(item[listKey] === key){
						index = i
						return index;
					}
				})
				return index
			},
			setFormData(e,key) {
				const index = e.detail.value
				const item = this.typeList[e.detail.value]
				this.form[key] = item.code
			},
			setTableData(e,index,key){
				let old = this.tableList[index]
				const idx = e.detail.value
				const item = this.resultList[idx]
				old[key] = item.value
				this.$set(this.tableList,index,old)
			}
		}
	}
</script>

<style lang="scss" scoped>
.popup-content {
	background-color: #fff;
	padding: 15px;
}
.form-input{
	display: block;
}

</style>
